<template>
  <div class="container">
    <div class="center">
      <h2>后台管理系统</h2>
      <el-form ref="form" :model="form" status-icon :rules="rules" label-width="" style="width:400px;margin:30px auto;">
        <el-form-item label="" prop="username">
          <span class="icon"><i class="el-icon-user" /></span>
          <el-input v-model="form.username" style="border:none;" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="" prop="password">
          <span class="icon"><i class="el-icon-lock" /></span>
          <el-input v-model="form.password" style="border:none;" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-button type="primary" style="width:335px;" @click="onSubmit()">登录</el-button>
        <el-button type="info" style="width:335px;margin-top:15px;" @click="reset()">重置</el-button>
      </el-form>
    </div>

  </div>
</template>
import { validUsername } from '@/utils/validate'
import { validPassword } from '@/utils/validate'
<script>
export default {
  name: 'Login',
  data() {
    var validUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var validPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: 'admin',
        password: '123456'
      },
      rules: {
        username: [
          { validator: validUsername, trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { validator: validPassword, trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reset() {
      this.$refs.form.resetFields()
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        const { data: result } = await this.$http.post('login', this.form)
        if (result.meta.status !== 200) {
          return this.$message.error('登录失败！')
        } else {
          this.$message.success('登录成功')
          window.sessionStorage.setItem('token', result.data.token)
          this.$router.push('/Home')
        }
      })
    }
  }
}
</script>
<style lang="scss">
.el-button + .el-button {
  margin-left: 0px;
}
.el-input {
  input {
    border-radius: 0 4px 4px 0;
    padding: 12px 5px 12px 15px;
  }
}
.el-form-item__error {
  left: 70px;
}
</style>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  background: slategray;
}
.center {
  width: 500px;
  height: 350px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 300px);
}
h2 {
  color: #666;
  line-height: 60px;
  height: 60px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.el-input {
  width: 300px;
}
.icon {
  background: #f4f4f4;
  padding: 11px 10px;
  border-radius: 4px 0 0 4px;
  border: 1px solid #dcdfe6;
  border-right: none;
}
</style>
